<template>
  <!-- 手机详情 -->
  <div class="mobile">
    <template v-if="data.projectType == 3535">
      <a-list :data-source="dataLabel2" size="small">
        <a-list-item slot="renderItem" slot-scope="item2, index">
          <a-list-item-meta :description="item2.label" class="meta"> </a-list-item-meta>
          <img v-if="data[item2.type] != 'img'"
            :src="getImg(`${data[item2.prop][0].Path}/${data[item2.prop][0].NewFileName}`)" width="150px" height="150px"
            alt="" style="margin: 20px" />
          <template v-else-if="item2.prop.indexOf('hone') > -1">
            {{ getTel(data[item2.prop]) }}
          </template>
          <div v-else class="detail">{{ data[item2.prop] }}</div>
        </a-list-item>
      </a-list>
    </template>
    <template v-if="data.projectType == 3534">
      <a-list :data-source="dataLabel3" size="small">
        <a-list-item slot="renderItem" slot-scope="item3, index">
          <a-list-item-meta :description="item3.label" class="meta"> </a-list-item-meta>
          <!-- <img v-if="data[item3.type] != 'img'"
            :src="getImg(`${data[item3.prop][0].Path}/${data[item3.prop][0].NewFileName}`)" width="150px" height="150px"
            alt="" style="margin: 20px" /> -->
          <div v-if="item3.prop == 'mainStructure'" class="detail">{{ (data.mainStructureOther != null &&
            data.mainStructureOther != '') ? `其他：${data.mainStructureOther}` : data.MainStructureName }}</div>
          <div v-else-if="item3.prop == 'demolitionType'" class="detail">{{ (data.demolitionTypeOther != null &&
            data.demolitionTypeOther != '') ? `其他：${data.demolitionTypeOther}` : data.DemolitionTypeName }}</div>
          <div v-else-if="item3.prop.indexOf('hone') > -1">
            {{ getTel(data[item2.prop]) }}
          </div>
          <div v-else class="detail">{{ data[item3.prop] }}</div>
        </a-list-item>
      </a-list>
    </template>

    <template v-else>
      <a-list :data-source="dataLabels" size="small">
        <a-list-item slot="renderItem" slot-scope="item, index">
          <a-list-item-meta :description="item.label" class="meta"> </a-list-item-meta>
          <div class="detail">{{ data[item.prop] }}</div>
        </a-list-item>
      </a-list>
    </template>
  </div>
</template>
<script>
import { GetProjectByEncryptionID } from '@/api/project'
import { tranDate } from '@/utils/util'
export default {
  data() {
    return {
      dataLabels: [
        {
          label: '工程名称',
          prop: 'projectName',
        },
        {
          label: '工程地址',
          prop: 'address',
        },
        {
          label: '投资额(万元)',
          prop: 'investment',
        },
        {
          label: '工程发包形式',
          prop: 'ContractTypeName',
        },
        {
          label: '开工日期',
          prop: 'startDate',
        },
        {
          label: '拟竣工日期',
          prop: 'endDate',
        },
        {
          label: '建设单位',
          prop: 'ownerUnit',
        },
        {
          label: '建设单位负责人',
          prop: 'ownerUnitHead',
        },
        {
          label: '建设单位联系电话',
          prop: 'ownerUnitPhone',
        },
        {
          label: '施工单位',
          prop: 'constructionUnit',
        },
        {
          label: '施工单位负责人',
          prop: 'constructionUnitHead',
        },
        {
          label: '施工单位联系电话',
          prop: 'constructionUnitPhone',
        },
        {
          label: '监理单位',
          prop: 'supervisorUnit',
        },
        {
          label: '监理单位负责人',
          prop: 'supervisorUnitHead',
        },
        {
          label: '监理单位联系电话',
          prop: 'supervisorUnitPhone',
        },
        {
          label: '工程情况',
          prop: 'projectSituation',
        },
      ],
      dataLabel2: [
        {
          label: '工程名称',
          prop: 'projectName',
        },
        {
          label: '工程地址',
          prop: 'address',
        },
        {
          label: '投资额(万元)',
          prop: 'investment',
        },
        {
          label: '工程发包形式',
          prop: 'ContractTypeName',
        },
        {
          label: '开工日期',
          prop: 'startDate',
        },
        {
          label: '拟竣工日期',
          prop: 'endDate',
        },
        {
          label: '建设单位',
          prop: 'ownerUnit',
        },
        {
          label: '建设单位负责人',
          prop: 'ownerUnitHead',
        },
        {
          label: '建设单位联系电话',
          prop: 'ownerUnitPhone',
        },
        {
          label: '施工单位',
          prop: 'constructionUnit',
        },
        {
          label: '施工单位负责人',
          prop: 'constructionUnitHead',
        },
        {
          label: '施工单位联系电话',
          prop: 'constructionUnitPhone',
        },
        {
          label: '工程情况',
          prop: 'projectSituation',
        },
        {
          label: '所在楼盘（或物业名称）',
          prop: 'residentialName',
        },
        {
          label: '门牌号',
          prop: 'houseNumber',
        },
        {
          label: '室号',
          prop: 'roomNumber',
        },
        {
          label: '物业单位名称',
          prop: 'pmcName',
        },
        {
          label: '物业单位负责人',
          prop: 'pmcHead',
        },
        {
          label: '物业单位联系电话',
          prop: 'pmcPhone',
        },
        {
          label: '是否变更墙体',
          prop: 'isChangeWall',
        },
        {
          label: '应提供材料',
          prop: 'Informations',
          type: 'img',
        },
      ],
      dataLabel3: [
        {
          label: '项目名称',
          prop: 'projectName',
        },
        {
          label: '项目地址',
          prop: 'address',
        },
        {
          label: '单位名称',
          prop: 'constructionUnit',
        },
        {
          label: '单位负责人',
          prop: 'constructionUnitHead',
        },
        {
          label: '单位联系方式',
          prop: 'constructionUnitPhone',
        },
        {
          label: '项目经理',
          prop: 'projectManager',
        },
        {
          label: '项目经理联系方式',
          prop: 'projectManagerPhone',
        },
        {
          label: '项目安全员',
          prop: 'safetyOfficer',
        },
        {
          label: '项目安全员联系方式',
          prop: 'safetyOfficerPhone',
        },
        {
          label: '主体结构',
          prop: 'mainStructure',
        },
        {
          label: '拆除类型',
          prop: 'demolitionType',
        },
        {
          label: '户数',
          prop: 'households',
        },
        {
          label: '建筑面积',
          prop: 'buildingArea',
        },
        {
          label: '开工日期',
          prop: 'startDate',
        },
        {
          label: '完工时间',
          prop: 'endDate',
        }
      ],
      data: {},
    }
  },
  created() {
    const encryptionID = this.$route.query.encryptionID
    setTimeout(() => { this.initData(encryptionID) }, 2000)
  },
  methods: {
    initData(p) {
      const param = {
        encryptionID: p,
      }
      const _this = this
      GetProjectByEncryptionID(param)
        .then((res) => {
          _this.data = res.data
          _this.data.startDate = tranDate(_this.data.startDate)
          _this.data.endDate = tranDate(_this.data.endDate)
        })
        .catch()
    },

    getImg(str) {
      const url = `${process.env.VUE_APP_API_BASE_URL}${str}`
      return url
    },
    getTel(str) {
      // 定义正则表达式，用于提取电话号码
      const reg = /^(\d{3})\d{4}(\d{4})$/
      // 使用正则表达式替换电话号码
      const newStr = str.replace(reg, "$1****$2")
      // 返回替换后的电话号码
      return newStr
    }
  },
}
</script>
<style>
.mobile {
  margin: 1rem;
}

.ant-list-item-meta-description {
  color: #3b3b3b;
}

.detail {
  color: #626263;
}
</style>
